<template>
  <transition name="drawer-modal">
    <div v-if="visible" class="drawer-modal v-blur" @click="onClickDrawerModal('modal')">
      <div :class="['drawer-content', 'v-shadow', 'v-radius', `drawer-${direction}`]" @click.stop>
        <slot />
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { PropType, inject, defineComponent } from "vue";

type IDirection = "left" | "right" | "top" | "bottom";

export default defineComponent({
  props: {
    visible: Boolean,
    direction: {
      type: String as PropType<IDirection>,
      default: "left",
    },
    sideWidth: {
      type: String,
      default: "400px",
    },
    sideHeight: {
      type: String,
      default: "300px",
    },
  },
  emits: ["update:visible"],
  setup(props, ctx) {
    const emit = ctx.emit;
    const g_bg = inject("$bg");
    const g_color = inject("$color");
    const onClickDrawerModal = (who: string) =>
      who === "modal" && emit("update:visible", false);
    return {
      g_bg,
      g_color,
      onClickDrawerModal,
    };
  },
});
</script>

<style scoped>
.drawer-modal-enter-active {
  transition: all 0.25s ease-out;
}

.drawer-modal-leave-active {
  transition: all 0.25s cubic-bezier(1, 0.5, 0.8, 1);
}

.drawer-modal-enter-from,
.drawer-modal-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.drawer-modal {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
}
.drawer-content {
  position: absolute;
  color: v-bind(g_color);
  background-color: v-bind(g_bg);
}
.drawer-left,
.drawer-right {
  width: v-bind(sideWidth);
  height: 100%;
  top: 0;
}
.drawer-left {
  left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.drawer-right {
  right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.drawer-top,
.drawer-bottom {
  width: 100%;
  height: v-bind(sideHeight);
  left: 0;
}
.drawer-top {
  top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.drawer-bottom {
  bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
</style>
